<template>
  <!--  仓库管理-->
  <div class="page">
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAddStorehouse" class="common_btn-small">添加仓库</el-button>
      <el-tabs v-model="activeName" type="card" @tab-click="changeWarehouse">
        <el-tab-pane :label="storehouse.name" :name="storehouse.id" v-for="storehouse in storehouseList"
                     :key="storehouse.id">
          <div style="height: 72vh;">
            <p class="location_class">
              仓库位置：{{storehouse.location}}
            </p>
            <!-- 货架-->
            <div v-if="showShelves">
              <p>
                <el-button icon="el-icon-edit" style="margin-left: 20px" @click.stop="handleUpdateStorehouse(storehouse)"
                           size="small" type="primary" plain>编辑仓库
                </el-button>
                <el-button icon="el-icon-plus" style="margin-left: 20px" @click.stop="handleAddShelves(storehouse.id)"
                           size="small" type="primary">添加货架
                </el-button>
              </p>
              <el-divider></el-divider>
              <el-card class="box-card" v-for="shelves in shelvesList" :key="shelves.id">
                <el-image :src="shelves.picUrl? constUrl + shelves.picUrl:require('../image/shelves.png')"
                          class="image"></el-image>
                <div class="bottom_info">
                  <p>名称：{{shelves.name}}</p>
                  <p>位置：{{shelves.location?shelves.location:'---'}}</p>
                  <p>描述：{{shelves.detail?shelves.detail:'---'}}</p>
                  <p>创建时间：{{ shelves.createTime | formatTimer }}</p>
                  <div class="bottom">
                    <el-button plain type="primary" size="mini" @click.stop="handleUpdateShelves(shelves)">编辑货架
                    </el-button>
                    <el-button plain type="info" size="mini" @click.stop="handleLookLocation(shelves)">查看货位</el-button>
                  </div>
                </div>
              </el-card>
            </div>
            <!-- 货位-->
            <div v-else>
              <p class="location_class">
                货架位置：{{shelves.location}}
              </p>
              <el-page-header @back="goBack" :content="shelves.name+'货架信息'"></el-page-header>
              <el-divider></el-divider>
              <div v-for="(location,index) in locationList" :key="index">
                <el-row :gutter="20">
                  <el-col :span="2">
                    <div class="row_class">第{{locationList.length - index}}层</div>
                  </el-col>
                  <el-col :span="22">
                    <div class="location_row_class">
                      <el-card class="box-card2" v-for="item in location" :key="item.id">
                        <el-image
                          :src="item.hasUse === 1? require('../image/closeBox.png'):require('../image/openBox.png')"
                          class="image2"></el-image>
                        <div class="bottom_info">
                          名称：
                          <el-input style="width: 70%" placeholder="" size="mini" v-model="item.name">
                            <template slot="append">
                              <el-button @click="updateLocationName(item)">修改</el-button>
                            </template>
                          </el-input>
                          <p>编号：{{item.row}}-{{item.line}}</p>
                          <div class="bottom">
                            <el-button plain type="info" size="mini" @click.stop="handleLookGoods(item)">查看货品
                            </el-button>
                          </div>
                        </div>
                      </el-card>
                      <el-card class="box-card2">
                        <div class="location_add_class">
                          <el-button plain icon="el-icon-circle-plus" @click="addLocation(location)"> 添加货位</el-button>
                        </div>
                      </el-card>
                    </div>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </div>
            </div>
          </div>
          <x-loading v-show="isLoading"></x-loading>
        </el-tab-pane>
      </el-tabs>

      <!-- 新增编辑仓库弹窗 -->
      <el-dialog :title="storehouseDialogTitle" :visible.sync="isShowWarehouseDialog" :close-on-click-modal="false"
                 width="520px">
        <!-- 具体form表单 -->
        <el-form label-position="right" ref="storehouse" :rules="storehouseRules" :model="storehouse" label-width="110px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="storehouse.name" placeholder="请输入仓库名称"></el-input>
          </el-form-item>
          <el-form-item label="位置信息" prop="location">
            <el-input v-model="storehouse.location" placeholder="请输入仓库位置"></el-input>
          </el-form-item>
        </el-form>
        <!-- 操作按钮 -->
        <span slot="footer" class="dialog-footer">
        <el-button type="info" class="common_btn-white" @click="isShowWarehouseDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateStorehouseForm">确定</el-button>
      </span>
      </el-dialog>

      <!-- 新增编辑货架弹窗 -->
      <el-dialog :title="shelvesDialogTitle" :visible.sync="isShowShelvesDialog" :close-on-click-modal="false"
                 width="520px">
        <!-- 具体form表单 -->
        <el-form label-position="right" ref="shelves" :rules="shelvesRules" :model="shelves" label-width="110px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="shelves.name" placeholder="请输入货架名称"></el-input>
          </el-form-item>
          <el-form-item label="层数" prop="rows" v-if="!shelves.id">
            <el-input v-model="shelves.rows" placeholder="输入货架层数"></el-input>
          </el-form-item>
          <el-form-item label="每层格数" prop="lines" v-if="!shelves.id">
            <el-input v-model="shelves.lines" placeholder="货架每层有多少个格子"></el-input>
          </el-form-item>
          <el-form-item label="位置信息" prop="location">
            <el-input v-model="shelves.location" placeholder="请输入货架位置"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="detail">
            <el-input v-model="shelves.detail" type="textarea" :autosize="{ minRows: 3, maxRows: 4}"
                      placeholder="描述货架信息"></el-input>
          </el-form-item>
          <el-form-item label="货架照片" prop="picUrl">
            <upload-img avatar v-model="shelves.picUrl" :limit="1" :size-limit="1"
                        ref="uploadPic"></upload-img>
          </el-form-item>
        </el-form>
        <!-- 操作按钮 -->
        <span slot="footer" class="dialog-footer">
        <el-button type="info" class="common_btn-white" @click="isShowShelvesDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateShelvesForm">确定</el-button>
      </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import {
  getStorehouse,
  getShelves,
  getLocation,
  addOrUpdateStorehouse,
  addShelves,
  updateShelves,
  updateLocation,
  addLocation
} from '@/services/ERP/store'
import ItemMixins from "../item.mixins";
import UploadImg from '@/components/upload-img'
import XLoading from '@/components/animation/x-loading.vue'
// form表单校验规则
export default {
  components: {UploadImg, XLoading},
  mixins: [ItemMixins],
  data() {
    return {
      showShelves: true,
      activeName: '1',
      isLoading: false,
      // 表单校验的规则
      storehouseRules: {
        name: {required: true, message: '请输入仓库名称'}
      },
      shelvesRules: {
        name: {required: true, message: '请输入货架名称'},
      },
      isShowWarehouseDialog: false, // 是否显示仓库弹窗
      isShowShelvesDialog: false, // 是否显示货架弹窗
      isShowLocationDialog: false, // 是否显示货位弹窗
      storehouse: {},//仓库
      shelves: {
        picUrl: []
      },//货架
      location: {},//货位
      storehouseList: [],
      shelvesList: [],
      locationList: [],
    }
  },
  computed: {
    // 弹窗的title
    storehouseDialogTitle() {
      return this.storehouse.id ? '编辑仓库' : '新增仓库'
    },
    // 弹窗的title
    shelvesDialogTitle() {
      return this.shelves.id ? '编辑货架' : '新增货架'
    },
    // 弹窗的title
    locationDialogTitle() {
      return this.location.id ? '编辑货位' : '新增货位'
    },
  },
  methods: {
    //////////////////////////////////////仓库相关操作开始
    changeWarehouse(val) {
      this.getShelvesList(val.name)
    },
    async getStorehouseList() {
      let res = await getStorehouse();
      this.storehouseList = res.data || []
      this.activeName = this.storehouseList[0]?.id
      if(this.activeName){
        this.getShelvesList(this.storehouseList[0]?.id)
      }
    },
    // 表单提交
    validateStorehouseForm() {
      this.$refs.storehouse.validate((valid) => {
        if (valid) {
          this.submitStorehouse()
        }
      })
    },
    async submitStorehouse() {
      let res = await addOrUpdateStorehouse(this.storehouse)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.storehouse.id ? '更新成功！' : '添加成功！'
        })
        this.isShowWarehouseDialog = false
        this.getStorehouseList()
      }
    },
    handleUpdateStorehouse(storehouse) {
      this.storehouse = JSON.parse(JSON.stringify(storehouse))
      this.isShowWarehouseDialog = true
      this.$nextTick(() => {
        this.$refs.storehouse.clearValidate()
      })
    },
    // 新增仓库
    handleAddStorehouse() {
      this.storehouse = {}
      this.isShowWarehouseDialog = true
      this.$nextTick(() => {
        this.$refs.storehouse.clearValidate()
      })
    },
    //////////////////////////////////////货架相关操作开始
    //获取仓库的货架
    async getShelvesList(storehouseId) {
      this.isLoading = true
      let res = await getShelves({id: storehouseId});
      this.isLoading = false
      this.shelvesList = res.data || []
    },
    // 表单提交
    validateShelvesForm() {
      this.$refs.shelves.validate((valid) => {
        if (valid) {
          this.submitShelves()
        }
      })
    },
    async submitShelves() {
      let action = this.shelves.id ? updateShelves : addShelves
      let res = await action(this.shelves)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.shelves.id ? '更新成功！' : '添加成功！'
        })
        this.isShowShelvesDialog = false
        this.getShelvesList(this.shelves.storehouseId)
      }
    },
    // 新增货架
    handleAddShelves(storehouseId) {
      this.shelves = {
        storehouseId: storehouseId,
      }
      this.isShowShelvesDialog = true
      this.$nextTick(() => {
        this.$refs.shelves.clearValidate()
      })
    },
    // 编辑货架
    handleUpdateShelves(shelves) {
      this.shelves = JSON.parse(JSON.stringify(shelves))
      this.isShowShelvesDialog = true
      this.$nextTick(() => {
        this.$refs.shelves.clearValidate()
      })
    },
    //////////////////////////////////////货位相关操作开始
    handleLookLocation(shelves) {
      this.shelves = JSON.parse(JSON.stringify(shelves))
      this.getLocationList(this.shelves.id)
      this.showShelves = false
    },
    async getLocationList(shelvesId) {
      this.isLoading = true
      let res = await getLocation({id: shelvesId})
      this.isLoading = false
      this.locationList = res.data || []
    },
    goBack() {
      this.showShelves = true
    },
    //更新货位名称
    async updateLocationName(item) {
      let res = await updateLocation(item)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '更新成功！'
        })
        this.getLocationList(this.item.shelvesId)
      }
    },
    //查看货架的货品信息
    handleLookGoods(location) {
      if (location.hasUse === 0) {
        this.$message('此货位没有货品！');
        return
      }
    },
    //添加货位
    async addLocation(location) {
      let last = location[location.length - 1]
      let form = {
        line: last.line + 1,
        row: last.row,
        shelvesId: last.shelvesId,
        storehouseId: last.storehouseId,
      }
      let res = await addLocation(form)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '新增货位成功！'
        })
        this.getLocationList(form.shelvesId)
      }
    },
  },
  mounted() {
    this.getStorehouseList()
  },
}
</script>

<style lang="less" scoped>
  .row_class {
    background: #03a9f4;
    text-align: center;
    line-height: 250px;
    margin: 12px 0px;
    border-radius: 5px;
    height: 250px;
    color: white;
    font-size: 30px;
  }

  .box-card {
    text-align: center;
    width: 250px;
    margin: 20px;
    display: inline-block;

    p {
      line-height: 20px;
    }

    .bottom_info {
      padding: 14px;
      text-align: left;
      background: #1990FE;
      color: white;
      font-weight: 600;
    }
  }

  .box-card:hover {
    /*font-size: 20px;*/
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
    text-align: right;
  }

  .el-card {
    color: black;
    box-shadow: 0 5px 5px 0 rgb(0 0 0 / 30%) !important;

    /deep/ .el-card__body {
      padding: 0px !important;
    }
  }

  .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3)
  }

  .location_class {
    margin: 20px;
  }

  .image {
    height: 200px;
  }

  .image2 {
    height: 130px;
  }

  .image-slot {
    line-height: 200px;
  }

  .box-card2 {
    text-align: center;
    width: 200px;
    margin: 10px;
    height: 250px;
    display: inline-block;

    .location_add_class {
      height: 250px;
      line-height: 250px;
      font-size: 20px
    }

    .location_add_class:hover {
      .el-button {
        font-size: 25px;
      }
    }

    p {
      line-height: 20px;
    }

    .bottom_info {
      padding: 14px;
      text-align: left;
      background: #1990FE;
      color: white;
      font-weight: 600;
    }

    /deep/ .el-input-group__append {
      background-color: #2196f3;
      color: white;
      padding: 0 5px !important;
      border: none;
    }

    /deep/ .el-input-group__prepend {
      padding: 0 5px !important;
      border: none;
    }
  }

  .location_row_class {
    overflow-x: auto;
    white-space: nowrap;
  }
  .location_row_class::-webkit-scrollbar{
    height: 10px;
    width: 20px;
  }
  .location_row_class::-webkit-scrollbar-thumb {
    width: 22px;
    background-color: #1990FE;
    border-radius: 10px;
  }

</style>
